<template>
  <view>
    <view class="mian-top">
      <view class="paymentcon">
        <view class="flexrow flexbetween">
          <view style="width: 150rpx">病情描述</view>
          <view>{{ Diseasequery.depict || "无" }}</view>
        </view>
        <view class="flexrow flexbetween">
          <view>患病时长</view>
          <view>{{ Diseasequery.duration || "无" }}</view>
        </view>
        <view class="flexrow flexbetween">
          <view style="width: 150rpx">医院检查</view>
          <view>{{ Diseasequery.examine || "无" }}</view>
        </view>
        <view class="flexrow flexbetween">
          <view style="width: 150rpx">用药情况</view>
          <view>{{ Diseasequery.medication || "无" }}</view>
        </view>
      </view>
      <view class="payment-png">
        <view>上传照片</view>
        <view class="payment-pngbot" v-if="imageUrls.length > 0">
          <view v-for="(item, index) in imageUrls" :key="index">
            <image :src="Preurl + item" mode="aspectFill"></image>
          </view>
        </view>
        <view class="payment-pngbot margintop10" v-else> 无 </view>
      </view>
      <view class="paymentcon">
        <view class="flexrow flexbetween">
          <view>诊疗类型</view>
          <view v-if="Diseasequery.category == 1">线上问诊</view>
          <view v-if="Diseasequery.category == 2">上门治疗</view>
        </view>
        <view class="flexrow flexbetween">
          <view>价格</view>
          <view>{{ orderPrice }}元</view>
        </view>
        <view class="flexrow flexbetween">
          <view>权益保障</view>
          <view>医生超过24小时未回复将自动退款</view>
        </view>
        <!-- <view class=" flexrow flexbetween">
					<view>当前金币余额</view>
					<view>15</view>
				</view> -->
        <view class="fontsize12 tyment">
          <span @click="tocheck">
            <template v-if="!checkflage">
              <image src="https://applet.youtuyiliao.com/profile/upload/xiaochengxu/static/login/nochoose.png" mode="">
              </image>
            </template>
            <template v-else>
              <image src="https://applet.youtuyiliao.com/profile/upload/xiaochengxu/static/login/choose.png" mode="">
              </image>
            </template>
          </span>
          <span>我将遵守《</span>
          <span class="color3FA" @click="tProtocol">慢病管护诊疗协议</span>
          <span>》</span>
        </view>
      </view>
    </view>
    <view class="totlalbtn flexrow flexbetween">
      <view>
        <!-- <view class="fontsize12">价格18元，金币抵消15元</view> -->
        <view class="color3FA fontsize14">合计：{{ orderPrice }}元</view>
      </view>
      <view class="mybtn">
        <my-button borderRadius="8" height="80" width="232" hoverClass="none" @click="nowpayment" :disable="btndisable"
          :background="btndisable ? '#999' : ''">
          立即支付
        </my-button>
      </view>
    </view>
  </view>
</template>

<script>
import {
  getSysPrice,
  addDiseaseOrder,
  createPay,
  createPayApplet,
  testWxNotify,
  getAppletOpenId,
} from '../../../api/index.js'
import MyButton from "@/chronicDisease/components/my-button/my-button.vue";
export default {
  components: {
    MyButton
  },
  data() {
    return {
      checkflage: false,
      Diseasequery: {},
      Preurl: "", //前缀地址
      orderPrice: 0,
      imageUrls: [],
      btndisable: false,
      orderNumber: null,
      orderInfo: {},
      openId: null,
    };
  },
  onLoad(options) {
    this.Preurl = 'https://bedfamily.eos.xian-2.cmecloud.cn';
    this.Diseasequery = JSON.parse(decodeURIComponent(options.Diseasequery));
    if (this.Diseasequery.imageUrls) {
      this.imageUrls = this.Diseasequery.imageUrls.split(",");
    }
    this._getSysPrice();
    console.log(this.Diseasequery);
  },
  methods: {
    tProtocol() {
      uni.navigateTo({
        url: "../../login/agreement?category=" + 3,
      });
    },
    // 获取opid
    async _getAppletOpenId(val) {
      const res = await getAppletOpenId({
        code: val,
      });
      this.openId = res.data.wxOpenId;
    },
    async _getSysPrice() {
      await getSysPrice({
        category: this.Diseasequery.category,
      }).then((res) => {
        this.orderPrice = res.data.orderPrice;
      });
    },
    tocheck() {
      this.checkflage = !this.checkflage;
    },
    nowpayment() {
      // const this = that
      if (!this.checkflage) {
        this.$toast("请阅读协议内容");
        return;
      }
      if (this.btndisable) return;
      this.btndisable = true;
      uni.showLoading({
        mask: true,
      });

      addDiseaseOrder(this.Diseasequery).then((res) => {
        const that = this;
        uni.hideLoading();
        if (res.code == 200) {
          console.log(res);
          this.orderNumber = res.data.orderNumber;
          // #ifdef APP-PLUS
          createPay({
            orderNumber: res.data.orderNumber,
          }).then((res2) => {
            // this.payOrderInfo = res2.data
            const orderInfo = res2.data.data;
            console.log(22222);
            console.log(orderInfo);
            uni.requestPayment({
              provider: "wxpay",
              orderInfo,
              success(res) {
                // this.flag = 0
                // uni.navigateBack({
                // 		delta: 1,
                // 		animationType: 'pop-out',
                // 		animationDuration: 300
                // });
                uni.reLaunch({
                  url: "../paysuccess/paysuccess?orderPrice=" +
                    that.orderPrice +
                    "&Diseasequery=" +
                    encodeURIComponent(JSON.stringify(that
                      .Diseasequery)),
                });
              },
              fail(err) {
                console.log(11, orderInfo, err)
              },
            });

            uni.hideLoading();
            console.log(res2);
            if (res.code == 200) {
              setTimeout(() => {
                testWxNotify({
                  orderNumber: res.data.orderNumber
                }).then(res => {
                  uni.hideLoading()
                  if (res.code == 200) {
                    this.btndisable = false
                    uni.reLaunch({
                      url: '../paysuccess/paysuccess?orderPrice=' + this.orderPrice + '&Diseasequery=' + encodeURIComponent(JSON.stringify(this.Diseasequery))
                    })
                  }
                })
              }, 1500)
            }
          });
          // #endif
          // 微信环境下
          // #ifdef MP-WEIXIN
		  console.log('2222');
          uni.login({
            provider: "weixin",
            // "onlyAuthorize": true, // 微信登录仅请求授权认证
            success: async (loginRes) => {
              // console.log(loginRes, 22222222222);
              // await this._getAppletOpenId(loginRes.code);
              this.openId = uni.getStorageSync("openid_key");
              createPayApplet({
                orderNumber: res.data.orderNumber,
                openid: this.openId,
              }).then((res3) => {
                console.log(33333, res3);
                const orderInfo = res3.data;
                wx.requestPayment({
                  appId: orderInfo.appId,
                  timeStamp: orderInfo.timeStamp,
                  nonceStr: orderInfo.nonce_str,
                  package: orderInfo.package,
                  signType: "MD5",
                  paySign: orderInfo.paySign,

                  success(res) {
                    uni.reLaunch({
                      url: "../paysuccess/paysuccess?orderPrice=" +
                        that.orderPrice +
                        "&Diseasequery=" +
                        encodeURIComponent(JSON
                          .stringify(that
                            .Diseasequery)),
                    });
                    // this.flag = 0
                    // uni.navigateBack({
                    // 		delta: 1,
                    // 		animationType: 'pop-out',
                    // 		animationDuration: 300
                    // });
                  },
                  fail(err) {
                    console.log(22, err)
                  },
                });
              });
            },
            fail: function (err) {
              // 登录授权失败
              // err.code是错误码
              console.log(22, err)
            },
          });
          //#endif
        }
      });
    },
  },
};
</script>

<style lang="scss">
.mian-top {
  padding-bottom: 70rpx;

  .paymentcon {
    padding: 0 40rpx;
    font-size: 28rpx;

    >view {
      // height: 104rpx;
      padding: 40rpx 0;
      border-bottom: 2rpx solid #f7f7f7;
    }

    .tyment {
      padding: 18rpx 0;
      margin-bottom: 120rpx;

      image {
        width: 48rpx;
        height: 48rpx;
        margin-right: 8rpx;
        vertical-align: -14rpx;
      }
    }
  }

  .payment-png {
    padding: 32rpx 40rpx 0 40rpx;
    font-size: 28rpx;
    display: flex;
    flex-direction: column;
    border-bottom: 20rpx solid #f7f7f7;

    .payment-pngbot {
      padding-bottom: 32rpx;
      display: flex;
      flex-wrap: wrap;

      image {
        margin-top: 20rpx;
        width: 190rpx;
        height: 190rpx;
        margin-right: 24rpx;
      }
    }
  }
}

.totlalbtn {
  width: 100vw;
  padding: 22rpx 48rpx;
  background-color: #fff;
  position: fixed;

  bottom: 0;
  box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.12);
  // >view{
  // 	width: 100%;
  // }
  // .mybtn{
  // 	// position: relative;
  // 	// right:0rpx;
  // }
}
</style>